<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>dependency graph</title>
    <style>
      .node:active path,
.node:hover path,
.node.current path,
.node:active polygon,
.node:hover polygon,
.node.current polygon {
  stroke: fuchsia;
  stroke-width: 2;
}

.edge:active path,
.edge:hover path,
.edge.current path,
.edge:active ellipse,
.edge:hover ellipse,
.edge.current ellipse {
  stroke: url(#edgeGradient);
  stroke-width: 3;
  stroke-opacity: 1;
}

.edge:active polygon,
.edge:hover polygon,
.edge.current polygon {
  stroke: fuchsia;
  stroke-width: 3;
  fill: fuchsia;
  stroke-opacity: 1;
  fill-opacity: 1;
}

.edge:active text,
.edge:hover text {
  fill: fuchsia;
}

.cluster path {
  stroke-width: 3;
}

.cluster:active path,
.cluster:hover path {
  fill: #ffff0011;
}

div.hint {
  background-color: #000000aa;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 1rem;
  position: fixed;
  top: calc(50% - 4em);
  right: calc(50% - 10em);
  border: none;
  padding: 1em 3em 1em 1em;
}

.hint button {
  position: absolute;
  font-weight: bolder;
  right: 0.6em;
  top: 0.6em;
  color: inherit;
  background-color: inherit;
  border: 1px solid currentColor;
  border-radius: 1em;
  margin-left: 0.6em;
}

.hint a {
  color: inherit;
}

#button_help {
  color: white;
  background-color: #00000011;
  border-radius: 1em;
  position: fixed;
  top: 1em;
  right: 1em;
  font-size: 24pt;
  font-weight: bolder;
  width: 2em;
  height: 2em;
  border: none;
}

#button_help:hover {
  cursor: pointer;
  background-color: #00000077;
}

@media print {
  #button_help {
    display: none;
  }

  div.hint {
    display: none;
  }
}

    </style>
  </head>
  <body>
    <button id="button_help">?</button>
    <div id="hints" class="hint" style="display: none">
      <button id="close-hints">x</button>
      <span id="hint-text"></span>
      <ul>
        <li><b>Hover</b> - highlight</li>
        <li><b>Right-click</b> - pin highlight</li>
        <li><b>ESC</b> - clear</li>
      </ul>
    </div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Title: dependency&#45;cruiser output Pages: 1 -->
<svg width="749pt" height="462pt"
 viewBox="0.00 0.00 749.25 461.88" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 457.88)">
<title>dependency&#45;cruiser output</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-457.88 745.25,-457.88 745.25,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster_src</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M20,-25.88C20,-25.88 721.25,-25.88 721.25,-25.88 727.25,-25.88 733.25,-31.88 733.25,-37.88 733.25,-37.88 733.25,-433.88 733.25,-433.88 733.25,-439.88 727.25,-445.88 721.25,-445.88 721.25,-445.88 20,-445.88 20,-445.88 14,-445.88 8,-439.88 8,-433.88 8,-433.88 8,-37.88 8,-37.88 8,-31.88 14,-25.88 20,-25.88"/>
<text text-anchor="middle" x="370.62" y="-433.32" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
</g>
<g id="clust2" class="cluster">
<title>cluster_src/parse</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M237,-239.88C237,-239.88 566.5,-239.88 566.5,-239.88 572.5,-239.88 578.5,-245.88 578.5,-251.88 578.5,-251.88 578.5,-339.88 578.5,-339.88 578.5,-345.88 572.5,-351.88 566.5,-351.88 566.5,-351.88 237,-351.88 237,-351.88 231,-351.88 225,-345.88 225,-339.88 225,-339.88 225,-251.88 225,-251.88 225,-245.88 231,-239.88 237,-239.88"/>
<text text-anchor="middle" x="401.75" y="-339.32" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">parse</text>
</g>
<g id="clust3" class="cluster">
<title>cluster_src/render</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M225,-57.88C225,-57.88 547.25,-57.88 547.25,-57.88 553.25,-57.88 559.25,-63.88 559.25,-69.88 559.25,-69.88 559.25,-213.88 559.25,-213.88 559.25,-219.88 553.25,-225.88 547.25,-225.88 547.25,-225.88 225,-225.88 225,-225.88 219,-225.88 213,-219.88 213,-213.88 213,-213.88 213,-69.88 213,-69.88 213,-63.88 219,-57.88 225,-57.88"/>
<text text-anchor="middle" x="386.12" y="-213.32" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">render</text>
</g>
<!-- bin -->
<g id="node1" class="node">
<title>bin</title>
<g id="a_node1"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/bin" xlink:title="no&#45;orphans">
<polygon fill="#ccffcc" stroke="orange" points="70,-17.75 17.97,-17.75 16,-15.78 16,0 68.03,0 70,-1.97 70,-17.75"/>
<polyline fill="none" stroke="orange" points="68.03,-15.78 16,-15.78"/>
<polyline fill="none" stroke="orange" points="68.03,-15.78 68.03,0"/>
<polyline fill="none" stroke="orange" points="68.03,-15.78 70,-17.75"/>
<text text-anchor="middle" x="43" y="-5.2" font-family="Helvetica,sans-Serif" font-size="9.00" fill="orange">bin</text>
</a>
</g>
</g>
<!-- src/cli -->
<g id="node2" class="node">
<title>src/cli</title>
<g id="a_node2"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/cli" xlink:title="cli">
<polygon fill="#ccffcc" stroke="black" points="70,-188.75 17.97,-188.75 16,-186.78 16,-171 68.03,-171 70,-172.97 70,-188.75"/>
<polyline fill="none" stroke="black" points="68.03,-186.78 16,-186.78"/>
<polyline fill="none" stroke="black" points="68.03,-186.78 68.03,-171"/>
<polyline fill="none" stroke="black" points="68.03,-186.78 70,-188.75"/>
<text text-anchor="start" x="38.5" y="-176.2" font-family="Helvetica,sans-Serif" font-size="9.00">cli</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts -->
<g id="node3" class="node">
<title>src/index&#45;node.mts</title>
<g id="a_node3"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/index-node.mts" xlink:title="index&#45;node.mts">
<path fill="#ddfeff" stroke="black" d="M179.08,-358.75C179.08,-358.75 111.92,-358.75 111.92,-358.75 108.96,-358.75 106,-355.79 106,-352.83 106,-352.83 106,-346.92 106,-346.92 106,-343.96 108.96,-341 111.92,-341 111.92,-341 179.08,-341 179.08,-341 182.04,-341 185,-343.96 185,-346.92 185,-346.92 185,-352.83 185,-352.83 185,-355.79 182.04,-358.75 179.08,-358.75"/>
<text text-anchor="start" x="114" y="-346.2" font-family="Helvetica,sans-Serif" font-size="9.00">index&#45;node.mts</text>
</a>
</g>
</g>
<!-- src/cli&#45;&gt;src/index&#45;node.mts -->
<g id="edge1" class="edge">
<title>src/cli&#45;&gt;src/index&#45;node.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M70.37,-177.5C89.73,-177.5 112.25,-177.5 112.25,-177.5 112.25,-177.5 112.25,-331.58 112.25,-331.58"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="110.15,-331.58 112.25,-337.58 114.35,-331.58 110.15,-331.58"/>
</g>
<!-- src/options.mts -->
<g id="node4" class="node">
<title>src/options.mts</title>
<g id="a_node4"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/options.mts" xlink:title="options.mts">
<path fill="#ddfeff" stroke="black" d="M691.21,-94.75C691.21,-94.75 640.54,-94.75 640.54,-94.75 637.58,-94.75 634.62,-91.79 634.62,-88.83 634.62,-88.83 634.62,-82.92 634.62,-82.92 634.62,-79.96 637.58,-77 640.54,-77 640.54,-77 691.21,-77 691.21,-77 694.17,-77 697.12,-79.96 697.12,-82.92 697.12,-82.92 697.12,-88.83 697.12,-88.83 697.12,-91.79 694.17,-94.75 691.21,-94.75"/>
<text text-anchor="start" x="642.62" y="-82.2" font-family="Helvetica,sans-Serif" font-size="9.00">options.mts</text>
</a>
</g>
</g>
<!-- src/cli&#45;&gt;src/options.mts -->
<g id="edge2" class="edge">
<title>src/cli&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M43.25,-170.56C43.25,-161.59 43.25,-149.38 43.25,-149.38 43.25,-149.38 656.25,-149.38 656.25,-149.38 656.25,-149.38 656.25,-104.27 656.25,-104.27"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="658.35,-104.27 656.25,-98.27 654.15,-104.27 658.35,-104.27"/>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/options.mts -->
<g id="edge3" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M177.25,-340.74C177.25,-308.78 177.25,-203.88 177.25,-203.88 177.25,-203.88 677.25,-203.88 677.25,-203.88 677.25,-203.88 677.25,-104.16 677.25,-104.16"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="679.35,-104.16 677.25,-98.16 675.15,-104.16 679.35,-104.16"/>
</g>
<!-- src/parse/index.mts -->
<g id="node5" class="node">
<title>src/parse/index.mts</title>
<g id="a_node5"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/index.mts" xlink:title="index.mts">
<path fill="#ffccff" stroke="black" d="M282.08,-295.75C282.08,-295.75 238.92,-295.75 238.92,-295.75 235.96,-295.75 233,-292.79 233,-289.83 233,-289.83 233,-283.92 233,-283.92 233,-280.96 235.96,-278 238.92,-278 238.92,-278 282.08,-278 282.08,-278 285.04,-278 288,-280.96 288,-283.92 288,-283.92 288,-289.83 288,-289.83 288,-292.79 285.04,-295.75 282.08,-295.75"/>
<text text-anchor="start" x="241" y="-283.2" font-family="Helvetica,sans-Serif" font-size="9.00">index.mts</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/parse/index.mts -->
<g id="edge4" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/parse/index.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M181.25,-340.61C181.25,-324.31 181.25,-292.2 181.25,-292.2 181.25,-292.2 223.76,-292.2 223.76,-292.2"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="223.76,-294.3 229.76,-292.2 223.76,-290.1 223.76,-294.3"/>
</g>
<!-- src/render/index&#45;node.mts -->
<g id="node6" class="node">
<title>src/render/index&#45;node.mts</title>
<g id="a_node6"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/index-node.mts" xlink:title="index&#45;node.mts">
<path fill="#ccccff" stroke="black" d="M294.08,-174.75C294.08,-174.75 226.92,-174.75 226.92,-174.75 223.96,-174.75 221,-171.79 221,-168.83 221,-168.83 221,-162.92 221,-162.92 221,-159.96 223.96,-157 226.92,-157 226.92,-157 294.08,-157 294.08,-157 297.04,-157 300,-159.96 300,-162.92 300,-162.92 300,-168.83 300,-168.83 300,-171.79 297.04,-174.75 294.08,-174.75"/>
<text text-anchor="start" x="229" y="-162.2" font-family="Helvetica,sans-Serif" font-size="9.00">index&#45;node.mts</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/render/index&#45;node.mts -->
<g id="edge5" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/render/index&#45;node.mts</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M185.38,-345.44C205.31,-345.44 225.25,-345.44 225.25,-345.44 225.25,-345.44 225.25,-184.05 225.25,-184.05"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="227.35,-184.05 225.25,-178.05 223.15,-184.05 227.35,-184.05"/>
</g>
<!-- src/transform -->
<g id="node7" class="node">
<title>src/transform</title>
<g id="a_node7"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/transform" xlink:title="transform">
<polygon fill="#ffffcc" stroke="black" points="551.38,-377.75 499.1,-377.75 497.12,-375.78 497.12,-360 549.4,-360 551.38,-361.97 551.38,-377.75"/>
<polyline fill="none" stroke="black" points="549.4,-375.78 497.12,-375.78"/>
<polyline fill="none" stroke="black" points="549.4,-375.78 549.4,-360"/>
<polyline fill="none" stroke="black" points="549.4,-375.78 551.38,-377.75"/>
<text text-anchor="start" x="505.12" y="-365.2" font-family="Helvetica,sans-Serif" font-size="9.00">transform</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/transform -->
<g id="edge6" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/transform</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M185.42,-349.88C281.03,-349.88 515.25,-349.88 515.25,-349.88 515.25,-349.88 515.25,-350.87 515.25,-350.87"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="513.15,-350.79 515.25,-356.79 517.35,-350.79 513.15,-350.79"/>
</g>
<!-- src/version.mts -->
<g id="node8" class="node">
<title>src/version.mts</title>
<g id="a_node8"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/version.mts" xlink:title="version.mts">
<path fill="#ddfeff" stroke="black" d="M285.83,-391.75C285.83,-391.75 235.17,-391.75 235.17,-391.75 232.21,-391.75 229.25,-388.79 229.25,-385.83 229.25,-385.83 229.25,-379.92 229.25,-379.92 229.25,-376.96 232.21,-374 235.17,-374 235.17,-374 285.83,-374 285.83,-374 288.79,-374 291.75,-376.96 291.75,-379.92 291.75,-379.92 291.75,-385.83 291.75,-385.83 291.75,-388.79 288.79,-391.75 285.83,-391.75"/>
<text text-anchor="start" x="237.25" y="-379.2" font-family="Helvetica,sans-Serif" font-size="9.00">version.mts</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/version.mts -->
<g id="edge7" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/version.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M185.33,-354.31C218.82,-354.31 261.25,-354.31 261.25,-354.31 261.25,-354.31 261.25,-364.5 261.25,-364.5"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="259.15,-364.5 261.25,-370.5 263.35,-364.5 259.15,-364.5"/>
</g>
<!-- src/parse/index.mts&#45;&gt;src/options.mts -->
<g id="edge13" class="edge">
<title>src/parse/index.mts&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M252.25,-277.69C252.25,-257.18 252.25,-209.44 252.25,-209.44 252.25,-209.44 687.25,-209.44 687.25,-209.44 687.25,-209.44 687.25,-104.19 687.25,-104.19"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="689.35,-104.19 687.25,-98.19 685.15,-104.19 689.35,-104.19"/>
</g>
<!-- src/parse/scxml -->
<g id="node11" class="node">
<title>src/parse/scxml</title>
<g id="a_node11"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/scxml" xlink:title="scxml">
<polygon fill="#ffccff" stroke="black" points="416,-295.75 363.97,-295.75 362,-293.78 362,-278 414.03,-278 416,-279.97 416,-295.75"/>
<polyline fill="none" stroke="black" points="414.03,-293.78 362,-293.78"/>
<polyline fill="none" stroke="black" points="414.03,-293.78 414.03,-278"/>
<polyline fill="none" stroke="black" points="414.03,-293.78 416,-295.75"/>
<text text-anchor="start" x="377.38" y="-283.2" font-family="Helvetica,sans-Serif" font-size="9.00">scxml</text>
</a>
</g>
</g>
<!-- src/parse/index.mts&#45;&gt;src/parse/scxml -->
<g id="edge14" class="edge">
<title>src/parse/index.mts&#45;&gt;src/parse/scxml</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M288.38,-283.92C288.38,-283.92 352.59,-283.92 352.59,-283.92"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="352.59,-286.02 358.59,-283.92 352.59,-281.82 352.59,-286.02"/>
</g>
<!-- src/parse/smcat&#45;ast.schema.mts -->
<g id="node12" class="node">
<title>src/parse/smcat&#45;ast.schema.mts</title>
<g id="a_node12"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/smcat-ast.schema.mts" xlink:title="smcat&#45;ast.schema.mts">
<path fill="#ffccff" stroke="black" d="M436.08,-325.75C436.08,-325.75 341.92,-325.75 341.92,-325.75 338.96,-325.75 336,-322.79 336,-319.83 336,-319.83 336,-313.92 336,-313.92 336,-310.96 338.96,-308 341.92,-308 341.92,-308 436.08,-308 436.08,-308 439.04,-308 442,-310.96 442,-313.92 442,-313.92 442,-319.83 442,-319.83 442,-322.79 439.04,-325.75 436.08,-325.75"/>
<text text-anchor="start" x="344" y="-313.2" font-family="Helvetica,sans-Serif" font-size="9.00">smcat&#45;ast.schema.mts</text>
</a>
</g>
</g>
<!-- src/parse/index.mts&#45;&gt;src/parse/smcat&#45;ast.schema.mts -->
<g id="edge15" class="edge">
<title>src/parse/index.mts&#45;&gt;src/parse/smcat&#45;ast.schema.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M288.09,-289.83C314.15,-289.83 349.25,-289.83 349.25,-289.83 349.25,-289.83 349.25,-298.69 349.25,-298.69"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="347.15,-298.69 349.25,-304.69 351.35,-298.69 347.15,-298.69"/>
</g>
<!-- src/parse/smcat -->
<g id="node13" class="node">
<title>src/parse/smcat</title>
<g id="a_node13"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/smcat" xlink:title="smcat">
<polygon fill="#ffccff" stroke="black" points="416,-265.75 363.97,-265.75 362,-263.78 362,-248 414.03,-248 416,-249.97 416,-265.75"/>
<polyline fill="none" stroke="black" points="414.03,-263.78 362,-263.78"/>
<polyline fill="none" stroke="black" points="414.03,-263.78 414.03,-248"/>
<polyline fill="none" stroke="black" points="414.03,-263.78 416,-265.75"/>
<text text-anchor="start" x="377" y="-253.2" font-family="Helvetica,sans-Serif" font-size="9.00">smcat</text>
</a>
</g>
</g>
<!-- src/parse/index.mts&#45;&gt;src/parse/smcat -->
<g id="edge16" class="edge">
<title>src/parse/index.mts&#45;&gt;src/parse/smcat</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M270.25,-277.71C270.25,-268.89 270.25,-256.88 270.25,-256.88 270.25,-256.88 352.73,-256.88 352.73,-256.88"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="352.73,-258.98 358.73,-256.88 352.73,-254.78 352.73,-258.98"/>
</g>
<!-- src/render/dot -->
<g id="node16" class="node">
<title>src/render/dot</title>
<g id="a_node16"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/dot" xlink:title="dot">
<polygon fill="#ccccff" stroke="black" points="551.25,-105.75 499.22,-105.75 497.25,-103.78 497.25,-88 549.28,-88 551.25,-89.97 551.25,-105.75"/>
<polyline fill="none" stroke="black" points="549.28,-103.78 497.25,-103.78"/>
<polyline fill="none" stroke="black" points="549.28,-103.78 549.28,-88"/>
<polyline fill="none" stroke="black" points="549.28,-103.78 551.25,-105.75"/>
<text text-anchor="start" x="517.88" y="-93.2" font-family="Helvetica,sans-Serif" font-size="9.00">dot</text>
</a>
</g>
</g>
<!-- src/render/index&#45;node.mts&#45;&gt;src/render/dot -->
<g id="edge23" class="edge">
<title>src/render/index&#45;node.mts&#45;&gt;src/render/dot</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M294.25,-156.69C294.25,-138.55 294.25,-99.83 294.25,-99.83 294.25,-99.83 487.94,-99.83 487.94,-99.83"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="487.94,-101.93 493.94,-99.83 487.94,-97.73 487.94,-101.93"/>
</g>
<!-- src/render/scjson -->
<g id="node17" class="node">
<title>src/render/scjson</title>
<g id="a_node17"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/scjson" xlink:title="scjson">
<polygon fill="#ccccff" stroke="black" points="551.25,-192.75 499.22,-192.75 497.25,-190.78 497.25,-175 549.28,-175 551.25,-176.97 551.25,-192.75"/>
<polyline fill="none" stroke="black" points="549.28,-190.78 497.25,-190.78"/>
<polyline fill="none" stroke="black" points="549.28,-190.78 549.28,-175"/>
<polyline fill="none" stroke="black" points="549.28,-190.78 551.25,-192.75"/>
<text text-anchor="start" x="511.12" y="-180.2" font-family="Helvetica,sans-Serif" font-size="9.00">scjson</text>
</a>
</g>
</g>
<!-- src/render/index&#45;node.mts&#45;&gt;src/render/scjson -->
<g id="edge24" class="edge">
<title>src/render/index&#45;node.mts&#45;&gt;src/render/scjson</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M300.27,-162.5C373.95,-162.5 524.25,-162.5 524.25,-162.5 524.25,-162.5 524.25,-165.66 524.25,-165.66"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="522.15,-165.66 524.25,-171.66 526.35,-165.66 522.15,-165.66"/>
</g>
<!-- src/render/scxml -->
<g id="node18" class="node">
<title>src/render/scxml</title>
<g id="a_node18"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/scxml" xlink:title="scxml">
<polygon fill="#ccccff" stroke="black" points="416,-185.75 363.97,-185.75 362,-183.78 362,-168 414.03,-168 416,-169.97 416,-185.75"/>
<polyline fill="none" stroke="black" points="414.03,-183.78 362,-183.78"/>
<polyline fill="none" stroke="black" points="414.03,-183.78 414.03,-168"/>
<polyline fill="none" stroke="black" points="414.03,-183.78 416,-185.75"/>
<text text-anchor="start" x="377.38" y="-173.2" font-family="Helvetica,sans-Serif" font-size="9.00">scxml</text>
</a>
</g>
</g>
<!-- src/render/index&#45;node.mts&#45;&gt;src/render/scxml -->
<g id="edge25" class="edge">
<title>src/render/index&#45;node.mts&#45;&gt;src/render/scxml</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M296.25,-175.24C296.25,-179.24 296.25,-183 296.25,-183 296.25,-183 352.65,-183 352.65,-183"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="352.65,-185.1 358.65,-183 352.65,-180.9 352.65,-185.1"/>
</g>
<!-- src/render/smcat -->
<g id="node19" class="node">
<title>src/render/smcat</title>
<g id="a_node19"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/smcat" xlink:title="smcat">
<polygon fill="#ccccff" stroke="black" points="416,-141.75 363.97,-141.75 362,-139.78 362,-124 414.03,-124 416,-125.97 416,-141.75"/>
<polyline fill="none" stroke="black" points="414.03,-139.78 362,-139.78"/>
<polyline fill="none" stroke="black" points="414.03,-139.78 414.03,-124"/>
<polyline fill="none" stroke="black" points="414.03,-139.78 416,-141.75"/>
<text text-anchor="start" x="377" y="-129.2" font-family="Helvetica,sans-Serif" font-size="9.00">smcat</text>
</a>
</g>
</g>
<!-- src/render/index&#45;node.mts&#45;&gt;src/render/smcat -->
<g id="edge26" class="edge">
<title>src/render/index&#45;node.mts&#45;&gt;src/render/smcat</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M297.25,-156.5C297.25,-147.82 297.25,-136.25 297.25,-136.25 297.25,-136.25 352.94,-136.25 352.94,-136.25"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="352.94,-138.35 358.94,-136.25 352.94,-134.15 352.94,-138.35"/>
</g>
<!-- src/render/vector -->
<g id="node20" class="node">
<title>src/render/vector</title>
<g id="a_node20"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/vector" xlink:title="vector">
<polygon fill="#ccccff" stroke="black" points="416,-83.75 363.97,-83.75 362,-81.78 362,-66 414.03,-66 416,-67.97 416,-83.75"/>
<polyline fill="none" stroke="black" points="414.03,-81.78 362,-81.78"/>
<polyline fill="none" stroke="black" points="414.03,-81.78 414.03,-66"/>
<polyline fill="none" stroke="black" points="414.03,-81.78 416,-83.75"/>
<text text-anchor="start" x="376.62" y="-71.2" font-family="Helvetica,sans-Serif" font-size="9.00">vector</text>
</a>
</g>
</g>
<!-- src/render/index&#45;node.mts&#45;&gt;src/render/vector -->
<g id="edge27" class="edge">
<title>src/render/index&#45;node.mts&#45;&gt;src/render/vector</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M291.25,-156.82C291.25,-133.8 291.25,-74.88 291.25,-74.88 291.25,-74.88 352.48,-74.88 352.48,-74.88"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="352.48,-76.98 358.48,-74.88 352.48,-72.78 352.48,-76.98"/>
</g>
<!-- src/state&#45;machine&#45;model.mts -->
<g id="node15" class="node">
<title>src/state&#45;machine&#45;model.mts</title>
<g id="a_node15"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/state-machine-model.mts" xlink:title="state&#45;machine&#45;model.mts">
<path fill="#ddfeff" stroke="black" d="M719.33,-232.75C719.33,-232.75 612.42,-232.75 612.42,-232.75 609.46,-232.75 606.5,-229.79 606.5,-226.83 606.5,-226.83 606.5,-220.92 606.5,-220.92 606.5,-217.96 609.46,-215 612.42,-215 612.42,-215 719.33,-215 719.33,-215 722.29,-215 725.25,-217.96 725.25,-220.92 725.25,-220.92 725.25,-226.83 725.25,-226.83 725.25,-229.79 722.29,-232.75 719.33,-232.75"/>
<text text-anchor="start" x="614.5" y="-220.2" font-family="Helvetica,sans-Serif" font-size="9.00">state&#45;machine&#45;model.mts</text>
</a>
</g>
</g>
<!-- src/transform&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge37" class="edge">
<title>src/transform&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.63,-368.88C592.89,-368.88 666.25,-368.88 666.25,-368.88 666.25,-368.88 666.25,-241.97 666.25,-241.97"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="668.35,-241.97 666.25,-235.97 664.15,-241.97 668.35,-241.97"/>
</g>
<!-- src/index.mts -->
<g id="node9" class="node">
<title>src/index.mts</title>
<g id="a_node9"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/index.mts" xlink:title="index.mts">
<path fill="#ddfeff" stroke="black" d="M167.08,-295.75C167.08,-295.75 123.92,-295.75 123.92,-295.75 120.96,-295.75 118,-292.79 118,-289.83 118,-289.83 118,-283.92 118,-283.92 118,-280.96 120.96,-278 123.92,-278 123.92,-278 167.08,-278 167.08,-278 170.04,-278 173,-280.96 173,-283.92 173,-283.92 173,-289.83 173,-289.83 173,-292.79 170.04,-295.75 167.08,-295.75"/>
<text text-anchor="start" x="126" y="-283.2" font-family="Helvetica,sans-Serif" font-size="9.00">index.mts</text>
</a>
</g>
</g>
<!-- src/index.mts&#45;&gt;src/options.mts -->
<g id="edge8" class="edge">
<title>src/index.mts&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M155.25,-277.73C155.25,-255.1 155.25,-198.31 155.25,-198.31 155.25,-198.31 666.25,-198.31 666.25,-198.31 666.25,-198.31 666.25,-104.1 666.25,-104.1"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="668.35,-104.1 666.25,-98.1 664.15,-104.1 668.35,-104.1"/>
</g>
<!-- src/index.mts&#45;&gt;src/parse/index.mts -->
<g id="edge9" class="edge">
<title>src/index.mts&#45;&gt;src/parse/index.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M173.34,-281.55C173.34,-281.55 223.49,-281.55 223.49,-281.55"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="223.49,-283.65 229.49,-281.55 223.49,-279.45 223.49,-283.65"/>
</g>
<!-- src/index.mts&#45;&gt;src/transform -->
<g id="edge11" class="edge">
<title>src/index.mts&#45;&gt;src/transform</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M173.28,-285.1C190.46,-285.1 209.25,-285.1 209.25,-285.1 209.25,-285.1 209.25,-367 209.25,-367 209.25,-367 487.82,-367 487.82,-367"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="487.82,-369.1 493.82,-367 487.82,-364.9 487.82,-369.1"/>
</g>
<!-- src/index.mts&#45;&gt;src/version.mts -->
<g id="edge12" class="edge">
<title>src/index.mts&#45;&gt;src/version.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M173.5,-288.65C185.69,-288.65 197.25,-288.65 197.25,-288.65 197.25,-288.65 197.25,-382.88 197.25,-382.88 197.25,-382.88 219.85,-382.88 219.85,-382.88"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="219.85,-384.98 225.85,-382.88 219.85,-380.78 219.85,-384.98"/>
</g>
<!-- src/render/index.mts -->
<g id="node10" class="node">
<title>src/render/index.mts</title>
<g id="a_node10"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/index.mts" xlink:title="index.mts">
<path fill="#ccccff" stroke="black" d="M282.08,-130.75C282.08,-130.75 238.92,-130.75 238.92,-130.75 235.96,-130.75 233,-127.79 233,-124.83 233,-124.83 233,-118.92 233,-118.92 233,-115.96 235.96,-113 238.92,-113 238.92,-113 282.08,-113 282.08,-113 285.04,-113 288,-115.96 288,-118.92 288,-118.92 288,-124.83 288,-124.83 288,-127.79 285.04,-130.75 282.08,-130.75"/>
<text text-anchor="start" x="241" y="-118.2" font-family="Helvetica,sans-Serif" font-size="9.00">index.mts</text>
</a>
</g>
</g>
<!-- src/index.mts&#45;&gt;src/render/index.mts -->
<g id="edge10" class="edge">
<title>src/index.mts&#45;&gt;src/render/index.mts</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M137.25,-277.53C137.25,-242.63 137.25,-121.88 137.25,-121.88 137.25,-121.88 223.51,-121.88 223.51,-121.88"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="223.51,-123.98 229.51,-121.88 223.51,-119.78 223.51,-123.98"/>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/dot -->
<g id="edge28" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/dot</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M288.29,-116.67C353.58,-116.67 511.25,-116.67 511.25,-116.67 511.25,-116.67 511.25,-114.87 511.25,-114.87"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="513.35,-114.87 511.25,-108.87 509.15,-114.87 513.35,-114.87"/>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/scjson -->
<g id="edge29" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/scjson</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M288.4,-118.5C358.84,-118.5 538.25,-118.5 538.25,-118.5 538.25,-118.5 538.25,-165.48 538.25,-165.48"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="536.15,-165.48 538.25,-171.48 540.35,-165.48 536.15,-165.48"/>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/scxml -->
<g id="edge30" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/scxml</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M288.36,-122.17C303.13,-122.17 318.25,-122.17 318.25,-122.17 318.25,-122.17 318.25,-180.25 318.25,-180.25 318.25,-180.25 352.82,-180.25 352.82,-180.25"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="352.82,-182.35 358.82,-180.25 352.82,-178.15 352.82,-182.35"/>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/smcat -->
<g id="edge31" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/smcat</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M288.36,-120.33C329.91,-120.33 403.25,-120.33 403.25,-120.33 403.25,-120.33 403.25,-120.68 403.25,-120.68"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="401.15,-114.73 403.25,-120.73 405.35,-114.73 401.15,-114.73"/>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/vector -->
<g id="edge32" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/vector</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M288.23,-114.83C322.47,-114.83 376.25,-114.83 376.25,-114.83 376.25,-114.83 376.25,-93.17 376.25,-93.17"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="378.35,-93.17 376.25,-87.17 374.15,-93.17 378.35,-93.17"/>
</g>
<!-- src/parse/scxml&#45;&gt;src/transform -->
<g id="edge18" class="edge">
<title>src/parse/scxml&#45;&gt;src/transform</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.32,-289.83C458.4,-289.83 534.25,-289.83 534.25,-289.83 534.25,-289.83 534.25,-350.78 534.25,-350.78"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="532.15,-350.78 534.25,-356.78 536.35,-350.78 532.15,-350.78"/>
</g>
<!-- src/parse/parser&#45;helpers.mts -->
<g id="node14" class="node">
<title>src/parse/parser&#45;helpers.mts</title>
<g id="a_node14"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/parser-helpers.mts" xlink:title="parser&#45;helpers.mts">
<path fill="#ffccff" stroke="black" d="M564.58,-265.75C564.58,-265.75 483.92,-265.75 483.92,-265.75 480.96,-265.75 478,-262.79 478,-259.83 478,-259.83 478,-253.92 478,-253.92 478,-250.96 480.96,-248 483.92,-248 483.92,-248 564.58,-248 564.58,-248 567.54,-248 570.5,-250.96 570.5,-253.92 570.5,-253.92 570.5,-259.83 570.5,-259.83 570.5,-262.79 567.54,-265.75 564.58,-265.75"/>
<text text-anchor="start" x="486" y="-253.2" font-family="Helvetica,sans-Serif" font-size="9.00">parser&#45;helpers.mts</text>
</a>
</g>
</g>
<!-- src/parse/scxml&#45;&gt;src/parse/parser&#45;helpers.mts -->
<g id="edge19" class="edge">
<title>src/parse/scxml&#45;&gt;src/parse/parser&#45;helpers.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M416.38,-283.92C445.76,-283.92 488.25,-283.92 488.25,-283.92 488.25,-283.92 488.25,-275.06 488.25,-275.06"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="490.35,-275.06 488.25,-269.06 486.15,-275.06 490.35,-275.06"/>
</g>
<!-- src/parse/smcat&#45;&gt;src/parse/parser&#45;helpers.mts -->
<g id="edge20" class="edge">
<title>src/parse/smcat&#45;&gt;src/parse/parser&#45;helpers.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M416.37,-256.88C416.37,-256.88 468.71,-256.88 468.71,-256.88"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="468.71,-258.98 474.71,-256.88 468.71,-254.78 468.71,-258.98"/>
</g>
<!-- src/parse/parser&#45;helpers.mts&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge17" class="edge">
<title>src/parse/parser&#45;helpers.mts&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M561.25,-247.51C561.25,-237.75 561.25,-223.88 561.25,-223.88 561.25,-223.88 597.2,-223.88 597.2,-223.88"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="597.2,-225.98 603.2,-223.88 597.2,-221.78 597.2,-225.98"/>
</g>
<!-- src/render/dot&#45;&gt;src/options.mts -->
<g id="edge21" class="edge">
<title>src/render/dot&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.71,-98.42C587.41,-98.42 645.25,-98.42 645.25,-98.42 645.25,-98.42 645.25,-98.07 645.25,-98.07"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="647.35,-104.02 645.25,-98.02 643.15,-104.02 647.35,-104.02"/>
</g>
<!-- src/render/dot&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge22" class="edge">
<title>src/render/dot&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.58,-102.08C581.49,-102.08 625.25,-102.08 625.25,-102.08 625.25,-102.08 625.25,-205.69 625.25,-205.69"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="623.15,-205.69 625.25,-211.69 627.35,-205.69 623.15,-205.69"/>
</g>
<!-- src/render/scjson&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge33" class="edge">
<title>src/render/scjson&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.36,-183.88C578.49,-183.88 616.25,-183.88 616.25,-183.88 616.25,-183.88 616.25,-205.57 616.25,-205.57"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="614.15,-205.57 616.25,-211.57 618.35,-205.57 614.15,-205.57"/>
</g>
<!-- src/render/scxml&#45;&gt;src/render/scjson -->
<g id="edge34" class="edge">
<title>src/render/scxml&#45;&gt;src/render/scjson</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M416.37,-180.38C416.37,-180.38 487.89,-180.38 487.89,-180.38"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="487.89,-182.48 493.89,-180.38 487.89,-178.28 487.89,-182.48"/>
</g>
<!-- src/render/vector&#45;&gt;src/options.mts -->
<g id="edge35" class="edge">
<title>src/render/vector&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.34,-71.5C486.29,-71.5 666.25,-71.5 666.25,-71.5 666.25,-71.5 666.25,-72.02 666.25,-72.02"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="664.15,-67.66 666.25,-73.66 668.35,-67.66 664.15,-67.66"/>
</g>
<!-- src/render/vector&#45;&gt;src/render/dot -->
<g id="edge36" class="edge">
<title>src/render/vector&#45;&gt;src/render/dot</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M389.25,-83.95C389.25,-88.85 389.25,-93.92 389.25,-93.92 389.25,-93.92 487.9,-93.92 487.9,-93.92"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="487.9,-96.02 493.9,-93.92 487.9,-91.82 487.9,-96.02"/>
</g>
</g>
</svg>
    <script>
      var gMode = new Mode();

var title2ElementMap = (function makeElementMap() {
  /** @type {NodeListOf<SVGGElement>} */
  var nodes = document.querySelectorAll(".node");
  /** @type {NodeListOf<SVGGElement>} */
  var edges = document.querySelectorAll(".edge");
  return new Title2ElementMap(edges, nodes);
})();

function getHoverHandler(pTitle2ElementMap) {
  /** @type {string} */
  var currentHighlightedTitle = "";

  /** @param {MouseEvent} pMouseEvent */
  return function hoverHighlightHandler(pMouseEvent) {
    var closestNodeOrEdge = pMouseEvent.target.closest(".edge, .node");
    var closestTitleText = getTitleText(closestNodeOrEdge);

    if (
      !(currentHighlightedTitle === closestTitleText) &&
      gMode.get() === gMode.HOVER
    ) {
      resetNodesAndEdges();
      addHighlight(closestNodeOrEdge);
      pTitle2ElementMap.get(closestTitleText).forEach(addHighlight);
      currentHighlightedTitle = closestTitleText;
    }
  };
}

function getSelectHandler(pTitle2ElementMap) {
  /** @type {string} */
  var currentHighlightedTitle = "";

  /** @param {MouseEvent} pMouseEvent */
  return function selectHighlightHandler(pMouseEvent) {
    pMouseEvent.preventDefault();

    var closestNodeOrEdge = pMouseEvent.target.closest(".edge, .node");
    var closestTitleText = getTitleText(closestNodeOrEdge);

    if (!!closestNodeOrEdge) {
      gMode.setToSelect();
    } else {
      gMode.setToHover();
    }
    if (!(currentHighlightedTitle === closestTitleText)) {
      resetNodesAndEdges();
      addHighlight(closestNodeOrEdge);
      pTitle2ElementMap.get(closestTitleText).forEach(addHighlight);
      currentHighlightedTitle = closestTitleText;
    }
  };
}
function Mode() {
  var HOVER = 1;
  var SELECT = 2;

  function setToHover() {
    this._mode = HOVER;
  }
  function setToSelect() {
    this._mode = SELECT;
  }

  /**
   * @returns {number}
   */
  function get() {
    return this._mode || HOVER;
  }

  return {
    HOVER: HOVER,
    SELECT: SELECT,
    setToHover: setToHover,
    setToSelect: setToSelect,
    get: get,
  };
}

/**
 *
 * @param {SVGGelement[]} pEdges
 * @param {SVGGElement[]} pNodes
 * @return {{get: (pTitleText:string) => SVGGElement[]}}
 */
function Title2ElementMap(pEdges, pNodes) {
  /* {{[key: string]: SVGGElement[]}} */
  var elementMap = buildMap(pEdges, pNodes);

  /**
   * @param {NodeListOf<SVGGElement>} pEdges
   * @param {NodeListOf<SVGGElement>} pNodes
   * @return {{[key: string]: SVGGElement[]}}
   */
  function buildMap(pEdges, pNodes) {
    var title2NodeMap = buildTitle2NodeMap(pNodes);

    return nodeListToArray(pEdges).reduce(addEdgeToMap(title2NodeMap), {});
  }
  /**
   * @param {NodeListOf<SVGGElement>} pNodes
   * @return {{[key: string]: SVGGElement}}
   */
  function buildTitle2NodeMap(pNodes) {
    return nodeListToArray(pNodes).reduce(addNodeToMap, {});
  }

  function addNodeToMap(pMap, pNode) {
    var titleText = getTitleText(pNode);

    if (titleText) {
      pMap[titleText] = pNode;
    }
    return pMap;
  }

  function addEdgeToMap(pNodeMap) {
    return function (pEdgeMap, pEdge) {
      /** @type {string} */
      var titleText = getTitleText(pEdge);

      if (titleText) {
        var edge = pryEdgeFromTitle(titleText);

        pEdgeMap[titleText] = [pNodeMap[edge.from], pNodeMap[edge.to]];
        (pEdgeMap[edge.from] || (pEdgeMap[edge.from] = [])).push(pEdge);
        (pEdgeMap[edge.to] || (pEdgeMap[edge.to] = [])).push(pEdge);
      }
      return pEdgeMap;
    };
  }

  /**
   *
   * @param {string} pString
   * @return {{from?: string; to?:string;}}
   */
  function pryEdgeFromTitle(pString) {
    var nodeNames = pString.split(/\s*->\s*/);

    return {
      from: nodeNames.shift(),
      to: nodeNames.shift(),
    };
  }
  /**
   *
   * @param {string} pTitleText
   * @return {SVGGElement[]}
   */
  function get(pTitleText) {
    return (pTitleText && elementMap[pTitleText]) || [];
  }
  return {
    get: get,
  };
}

/**
 * @param {SVGGElement} pGElement
 * @return {string?}
 */
function getTitleText(pGElement) {
  /** @type {SVGTitleElement} */
  var title = pGElement && pGElement.querySelector("title");
  /** @type {string} */
  var titleText = title && title.textContent;

  if (titleText) {
    titleText = titleText.trim();
  }
  return titleText;
}

/**
 * @param {NodeListOf<Element>} pNodeList
 * @return {Element[]}
 */
function nodeListToArray(pNodeList) {
  var lReturnValue = [];

  pNodeList.forEach(function (pElement) {
    lReturnValue.push(pElement);
  });

  return lReturnValue;
}

function resetNodesAndEdges() {
  nodeListToArray(document.querySelectorAll(".current")).forEach(
    removeHighlight,
  );
}

/**
 * @param {SVGGElement} pGElement
 */
function removeHighlight(pGElement) {
  if (pGElement && pGElement.classList) {
    pGElement.classList.remove("current");
  }
}

/**
 * @param {SVGGElement} pGroup
 */
function addHighlight(pGroup) {
  if (pGroup && pGroup.classList) {
    pGroup.classList.add("current");
  }
}

var gHints = {
  HIDDEN: 1,
  SHOWN: 2,
  state: this.HIDDEN,
  show: function () {
    document.getElementById("hints").removeAttribute("style");
    gHints.state = gHints.SHOWN;
  },
  hide: function () {
    document.getElementById("hints").style = "display:none";
    gHints.state = gHints.HIDDEN;
  },
  toggle: function () {
    if ((gHints.state || gHints.HIDDEN) === gHints.HIDDEN) {
      gHints.show();
    } else {
      gHints.hide();
    }
  },
};

/** @param {KeyboardEvent} pKeyboardEvent */
function keyboardEventHandler(pKeyboardEvent) {
  if (pKeyboardEvent.key === "Escape") {
    resetNodesAndEdges();
    gMode.setToHover();
    gHints.hide();
  }
  if (pKeyboardEvent.key === "F1") {
    pKeyboardEvent.preventDefault();
    gHints.toggle();
  }
}

document.addEventListener("contextmenu", getSelectHandler(title2ElementMap));
document.addEventListener("mouseover", getHoverHandler(title2ElementMap));
document.addEventListener("keydown", keyboardEventHandler);
document.getElementById("close-hints").addEventListener("click", gHints.hide);
document.getElementById("button_help").addEventListener("click", gHints.toggle);
document.querySelector("svg").insertAdjacentHTML(
  "afterbegin",
  `<linearGradient id="edgeGradient">
      <stop offset="0%" stop-color="fuchsia"/>
      <stop offset="100%" stop-color="purple"/>
   </linearGradient>
  `,
);

// Add a small increment to the last value of the path to make gradients on
// horizontal paths work. Without them all browsers I tested with (firefox,
// chrome) do not render the gradient, but instead make the line transparent
// (or the color of the background, I haven't looked into it that deeply,
// but for the hack it doesn't matter which).
function skewLineABit(lDrawingInstructions) {
  var lLastValue = lDrawingInstructions.match(/(\d+\.?\d*)$/)[0];
  // Smaller values than .001 _should_ work as well, but don't in all
  // cases. Even this value is so small that it is not visible to the
  // human eye (tested with the two I have at my disposal).
  var lIncrement = 0.001;
  var lNewLastValue = parseFloat(lLastValue) + lIncrement;

  return lDrawingInstructions.replace(lLastValue, lNewLastValue);
}

nodeListToArray(document.querySelectorAll("path"))
  .filter(function (pElement) {
    return pElement.parentElement.classList.contains("edge");
  })
  .forEach(function (pElement) {
    pElement.attributes.d.value = skewLineABit(pElement.attributes.d.value);
  });

    </script>
  </body>
</html>